<template>
  <div>
    <tit></tit>
    <div class="loginpage">
      <div class="login1">
        <el-tabs v-model="activeName" @tab-click="handleClick" stretch="true">
          <el-tab-pane label="账号登陆" name="first">
            <div class="form">
              <div class="yzm">手机号验证码登录</div>
              <div class="email">
                <el-input
                  placeholder="请输入手机号、邮箱"
                  prefix-icon="el-icon-phone"
                  v-model="tel"
                >
                </el-input>
              </div>
              <div class="pwd">
                <el-input
                  placeholder="请输入密码"
                  prefix-icon="el-icon-phone"
                  v-model="pwd"
                  show-password
                >
                </el-input>
              </div>
              <div class="dl">
                <div @click="setname">登录</div>
              </div>
              <div class="forget">忘记密码？</div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="微信扫码登录" name="second">配置管理</el-tab-pane>
        </el-tabs>
        <div class="logintype">
          <div>qq</div>
          <div>支付宝</div>
          <div>注册账号></div>
        </div>
      </div>
    </div>
    <myfoot></myfoot>
  </div>
</template>

<script>
import tit from "../../components/Header/header";
import myfoot from "../../components/Footer/footer";
import { mapState, mapMutations, mapGetters } from "vuex";
export default {
  components: {
    tit,
    myfoot
  },
  data() {
    return {
      activeName: "second",
      pwd: "",
      input: "",
      tel: "",
    };
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
    setname(){
      sessionStorage.setItem("uname",this.tel)
    this.$store.state.telnum=this.tel
    console.log(this.$store.state.telnum);
    this.$router.push('/menberlenter')
    }
  },
  mounted() {
  },
};
</script>

<style>
#navi {
  display: none;
}
.loginpage {
  width: 100%;
  height: 500px;
  min-width: 1200px;
  position: relative;
  background: url(../../assets/images/loginimg/login_bg.jpg) 0 0 no-repeat;
}
.login1 {
  width: 300px;
  height: 400px;
  position: absolute;
  right: 0;
  border: 1px solid gray;
  background: white;
  padding: 10px 20px;
}
#tab-first {
  width: 50%;
}
.yzm {
  float: right;
  margin-bottom: 8px;
}
.email {
  margin-bottom: 30px;
}
.pwd {
  margin-bottom: 30px;
}
.dl {
  margin-bottom: 10px;
}
.dl > div {
  width: 100%;
  background: tomato;
  color: white;
  border-radius: 20px;
  text-align: center;
  padding: 8px 0;
}
.forget {
  text-align: center;
}
.logintype{
    display: flex;
    position: absolute;
    bottom: 0;
}
</style>